<include file="public@header" />
<link rel="stylesheet" type="text/css" href="__STATIC__/layui/css/layui.css">
<link rel="stylesheet" type="text/css" href="__STATIC__/layui/dist/layCascader.css">
</head>
<body>
	<div class="wrap">
		<ul class="nav nav-tabs">
			<li><a href="{:url('goods/index')}">商品列表</a></li>
			<li class="active"><a href="{:url('goods/add')}">商品添加</a></li>
		</ul>
		<form method="post" class="form-horizontal js-ajax-form margin-top-20 layui-form" action="{:url('admin/goods/add')}">
			<div class="form-group">
				<label class="col-sm-2 control-label"><span class="form-required">*</span>商品名称</label>
				<div class="col-md-6 col-sm-10">
					<input type="text" class="form-control" name="title">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label"><span class="form-required">*</span>所属店铺</label>
				<div class="col-md-6 col-sm-10">
					<select class="form-control" name="store_id" lay-search>
						<option value="">请选择</option>
						<foreach name="storeList" item="l">
							<option value="{$l.id}">{$l.name}</option>
						</foreach>
					</select>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label"><span class="form-required">*</span>商品类目</label>
				<div class="col-md-6 col-sm-10">
					<input id="categoryTree" name="category_id">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label"><span class="form-required">*</span>商品图片</label>
				<div class="col-md-6 col-sm-10">
					<ul id="photos" class="pic-list list-unstyled form-inline"></ul>
               		<a href="javascript:uploadMultiImage('图片上传','#photos','photos-item-tpl');" class="btn btn-default">选择图片</a>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label"><span class="form-required">*</span>商品详情</label>
				<div class="col-md-6 col-sm-10">
					<script type="text/plain" id="content" name="content"></script>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label"><span class="form-required">*</span>商品规格</label>
				<div class="col-md-6 col-sm-10">
					<div id="spec-list">
						<!-- <div class="help-block" id="spec-2">
							规格名：
							<input type="text" class="form-control" name="spec_types" style="width: 200px;display: inline;" placeholder="请输入规格名">
					        <a class="btn btn-danger" href="javascript:(function(){$('#spec-2').remove();})();"><i class="fa fa-trash fa-fw"></i></a>
					        <a class="btn btn-success" href="javascript:(function(){$('#spec-2').before($('#spec-2').next());})();"><i class="fa fa-arrow-down fa-fw"></i></a>
					        <hr style="border-bottom-width: 0px !important;">
					        规格值：
					        <a onclick="add_spec_value(this)" class="btn btn-default">+添加规格值</a>
	                        <hr>
						</div> -->
					</div>
					<div class="help-block">
						<a id="add_spec" class="btn btn-default">添加规格（最多2个）</a>
					</div>
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-10">
					<button type="submit" class="btn btn-primary js-ajax-submit" >{:lang('ADD')}</button>
				</div>
			</div>
		</form>
	</div>
	<script src="__STATIC__/js/admin.js"></script>
	<script type="text/javascript">
	    //编辑器路径定义
	    var editorURL = GV.WEB_ROOT;
	</script>
	<script type="text/javascript" src="__STATIC__/js/ueditor/ueditor.config.js"></script>
	<script type="text/javascript" src="__STATIC__/js/ueditor/ueditor.all.min.js"></script>
	<script type="text/javascript" src="__STATIC__/layui/layui.js"></script>
	<script type="text/html" id="photos-item-tpl">
	    <li id="saved-image{id}">
	        <input id="photo-{id}" type="hidden" name="images[]" value="{filepath}">
	        <input class="form-control" id="photo-{id}-name" type="hidden" name="photo_names[]" value="{name}" style="width: 200px;" title="图片名称">
	        <img id="photo-{id}-preview" src="{url}" style="height:80px;width: 80px;"
	             onclick="imagePreviewDialog(this.src);">
	        <a class="btn btn-default" href="javascript:uploadOneImage('图片上传','#photo-{id}');"><i class="fa fa-upload fa-fw"></i></a>
	        <a class="btn btn-danger" href="javascript:(function(){$('#saved-image{id}').remove();})();"><i class="fa fa-trash fa-fw"></i></a>
	        <a class="btn btn-success" href="javascript:(function(){$('#saved-image{id}').before($('#saved-image{id}').next());})();"><i class="fa fa-arrow-down fa-fw"></i></a>
	    </li>
	</script>
	<script type="text/javascript">
	    $(function () {

	        editorcontent = new baidu.editor.ui.Editor();
	        editorcontent.render('content');
	        try {
	            editorcontent.sync();
	        } catch (err) {
	        }

	    });

	    layui.config({
			base: '__STATIC__/layui/dist/'
		}).use(['element', 'code', 'layCascader', 'layer', 'jquery'], function () {
	    	var layer = layui.layer;
    		var $ = layui.jquery;
    		var layCascader = layui.layCascader;

		    var options = {$categoryTree};

		    layCascader({
		        elem: '#categoryTree',
		        clearable: true,
		        filterable: true,
		        options: options
		    });

		    $('#add_spec').click(function(){
		    	var length = $('#spec-list').children().length;
		    	if(length == 2){
					return false;
				}

				var id = Date.now();

		    	var html = '';
				html += '<div class="help-block" id="spec-'+id+'">';
				html += '规格名：';
				html += '<input type="text" class="form-control" name="spec_types['+id+']" style="width: 200px;display: inline;" placeholder="请输入规格名" required>';
				html += '<a class="btn btn-danger" href="javascript:(function(){$(\'#spec-'+id+'\').remove();})();"><i class="fa fa-trash fa-fw"></i></a>';
				html += '<a class="btn btn-success" href="javascript:(function(){$(\'#spec-'+id+'\').before($(\'#spec-'+id+'\').next());})();"><i class="fa fa-arrow-down fa-fw"></i></a>';
				html += '<hr style="border-bottom-width: 0px !important;">';
				html += '规格值：';
				html += '<a onclick="add_spec_value(this,'+id+')" class="btn btn-default">+添加规格值</a>';
				html += '<hr>';
				html += '</div>';

				$('#spec-list').append(html);
		    });

		    $('form').on('keypress', function(e) {
			    if(e.keyCode === 13) {
			      	return false;
			    }
		  	});
	    });

	    function add_spec_value(_this,id){
	    	var html = '<input type="text" class="form-control" name="spec_value['+id+'][]" style="width: 120px;display: inline;" placeholder="请输入规格值" required><a class="remove-spec-value" style="margin-right: 10px;" onclick="remove_spec_value(this)"><i class="fa fa-minus-circle" aria-hidden="true"></i></a>';
		    $(_this).before(html);
	    }

	    function remove_spec_value(_this){
	    	$(_this).prev().addBack().remove();
	    }


	</script>
</body>
</html>